/**
 * transfer 创建图表
 */

// var data = [
//     "11111", "22222", "2222", "3333", "4444", "455", "666", "78781", "9", "900", "100"
// ]
class Transfer {
    /**
     *
     * @param {Object} options
     * @param {String} options.selector DOM
     * @param {String} options.url 接口地址
     * @param {Array} options.data 数据
     * @param {Object} options.params 接口参数
     * @param {Object} options.props  映射
     * @param {String} options.title 选择的data
     */
    constructor(options) {
        this.defaults = {}
        this.options = $.extend({}, options);
        this.$Transfer = $(this.options.selector);
        this.title = options.title;
        this.arrL = [];
        this.arrR = [];
    }


    /**
     * 初始化
     */
    init() {
        $(this.options.selector).prepend(this.render());
        setTimeout(() => {
            if (this.options.title) {
                $('.transferTitle').text(this.title)
            }
            this.getData();
            this.trans();
            this.events();
        }, 1)
        // this.proData(data);
    }
    init_data() {
        $(this.options.selector + ' #transferSelect1').find('li').remove();
        $(this.options.selector + ' #transferSelect2').find('li').remove();
        this.getData();
    }
    proData(data) {
        this.arrL = data;
        data.forEach(element => {
            let dom = '<li value="' + element + '">' + element + '</li>';
            $(this.options.selector + ' #transferSelect1').append(dom);
        });
    }
    // 实现穿梭
    trans() {
        let self = this;
        $(self.options.selector + ' #transferSelect1').on('click', 'li', function () {
            $(this).addClass('selected');
            $('#transfer-left-btn').css('color', '#62a8ea');
            $(this).siblings('li').removeClass('selected');
        })
        $(self.options.selector + ' #transferSelect2').on('click', 'li', function () {
            $(this).addClass('selected');
            $('#transfer-right-btn').css('color', '#62a8ea');
            $(this).siblings('li').removeClass('selected');
        })
        $(self.options.selector + ' #transferSelect1').on('dblclick', 'li', function (item) {
            $(this).appendTo(self.options.selector + ' #transferSelect2');
            self.arrL.splice($(this).index(),1) 
            self.arrR.push($(this).text());
            $(this).addClass('selected');
            $(this).siblings('li').removeClass('selected');
            $('#transfer-left-btn').css('color', '#e4eaec');
            let H = $(self.options.selector + ' #transferSelect2').height();
            $('.transfer-Mapping_box .list-right').scrollTop(H);
            // self.changeData();
        })
        $(self.options.selector + ' #transferSelect2').on('dblclick', 'li', function (item) {
            $(this).appendTo(self.options.selector + ' #transferSelect1');
            for (let i = 0; i < self.arrR.length; i++) {
                if(self.arrR[i] == $(this).text()){
                    self.arrR.splice(i,1)
                }
            }
            self.arrL.push($(this).text());
            $('#transfer-right-btn').css('color', '#e4eaec');
            $(this).addClass('selected');
            $(this).siblings('li').removeClass('selected');
            let H = $(self.options.selector + ' #transferSelect1').height();
            $('.transfer-Mapping_box .list-left').scrollTop(H);
            // self.changeData();
        })

    }
    changeData() {
        return this.arrR;
    }

    render() {
        return `
        <label class="col-sm-2 control-label">
        <span class="star">*</span><span class="transferTitle">默认标题:</span></label>
        <div class="col-sm-4 transfer-left">
        <div class="transfer-Mapping_box">
            <input type="text" class="form-control blurSearch" id="leInput" placeholder="搜索">
            <div class="list list-left">
                <ul name="" multiple="multiple" id="transferSelect1"></ul>
            </div>
        </div>
        </div>
        <div class="col-sm-1 transfer-btn">
          <span class="icon wb-dropright" id="transfer-left-btn"></span></br>
          <span class="icon wb-dropleft" id="transfer-right-btn"></span>
        </div>
        <div class="col-sm-4 transfer-right">
        <div class="transfer-Mapping_box">
            <input type="text" class="form-control blurSearch" id="riInput" placeholder="搜索">
            <div class="list list-right">
                <ul name="mapNameList" multiple="multiple" id="transferSelect2">
                </ul>
            </div>
        </div>`
    }
    events() {
        let self = this;
        $('#leInput').keyup(function (e) {
            let arr = [];
            var keyWord = $(self.options.selector + ' #leInput').val();
            var reg = new RegExp(keyWord);
            let arrAll = self.arrL
            if (keyWord != "") {
                for (var i = 0; i < arrAll.length; i++) {
                    //如果字符串中不包含目标字符会返回-1
                    if (arrAll[i].match(reg)) {
                        arr.push(arrAll[i]);
                    }
                }
                $(self.options.selector + ' #transferSelect1').find('li').remove();
                arr.forEach((element, index) => {
                    let dom = '<li value="' + element + '">' + element + '</li>';
                    $(self.options.selector + ' #transferSelect1').append(dom);
                });
            } else {
         
                $(self.options.selector + ' #transferSelect1').find('li').remove();
                self.arrL.forEach((element, index) => {
                    let dom = '<li value="' + element + '">' + element + '</li>';
                    $(self.options.selector + ' #transferSelect1').append(dom);

                });
            }
        })
        $(self.options.selector + ' #riInput').keyup(function (e) {
            let arr2 = [];
            var keyWord2 = $(self.options.selector + ' #riInput').val();
            var reg2 = new RegExp(keyWord2);
            let arrAll2 = self.arrR
            if (keyWord2 != "") {
                for (var i = 0; i < arrAll2.length; i++) {
                    //如果字符串中不包含目标字符会返回-1
                    if (arrAll2[i].match(reg2)) {
                        arr2.push(arrAll2[i]);
                    }
                }
                $(self.options.selector + ' #transferSelect2').find('li').remove();
                arr2.forEach((element, index) => {
                    let dom = '<li value="' + element + '">' + element + '</li>';
                    $('#transferSelect2').append(dom);
                });
            } else {
                $(self.options.selector + ' #transferSelect2').find('li').remove();
                self.arrR.forEach((element, index) => {
                    let dom = '<li value="' + element + '">' + element + '</li>';
                    $(self.options.selector + ' #transferSelect2').append(dom);
                });
            }
        })



    }
    /**
     *
     */
    getData() {
        wdAjax.post({
            url: this.options.url,
            cache: false, //禁用缓存
            data: this.params || {}, //传入已封装的参数
            success: result => {
                this.proData(result);
            }
        })

    }


}